<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { updatePasswordService } from '@/api/user.js'
import { userInfoStore } from '@/stores/userInfo.js'
import { useRouter } from 'vue-router' 
import { useTokenStore } from '@/stores/token'
import { Check } from '@element-plus/icons-vue'
const router = useRouter();
const tokenStore = useTokenStore();
const uInfoStore = userInfoStore();
const userInfo = ref({
    old_pwd: '',
    new_pwd: '',
    re_pwd: ''
})
const rules = {
    old_pwd: [
        { required: true, message: '不能为空', trigger: 'blur' },
        { pattern: /^.{4,16}$/, message: '必须为4-16位', trigger: 'blur' }
    ],
    new_pwd: [
        { required: true, message: '不能为空', trigger: 'blur' },
        { pattern: /^.{4,16}$/, message: '必须为4-16位', trigger: 'blur' }
    ],
    re_pwd: [
        { required: true, message: '不能为空', trigger: 'blur' },
        { pattern: /^.{4,16}$/, message: '必须为4-16位', trigger: 'blur' }
    ]
}
// 发起请求
const formRef = ref()
const updatePwd = async () => {
    // 表单验证,如果验证不通过则不发起请求
    await formRef.value.validate(async (valid) => {
        if (!valid) {
            return
        }
        if (userInfo.value.new_pwd !== userInfo.value.re_pwd) {
            ElMessage.error('两次密码不一致')
            return
        }
        let res = await updatePasswordService(userInfo.value)
        ElMessage.success(res.msg ? res.msg : '修改成功')
        // 清除token
        tokenStore.removeToken()
        // 清除用户信息
        uInfoStore.removeInfo()
        // 跳转到登录页面
        router.push('/login')
    })
}
</script>
<template>
    <div class="page-container">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span class="title">密码重置</span>
                </div>
            </template>
            
            <div class="form-content">
                <el-form 
                    ref="formRef" 
                    :model="userInfo" 
                    :rules="rules" 
                    label-width="100px" 
                    size="large"
                    class="password-form"
                >
                    <el-form-item label="旧密码" prop="old_pwd">
                        <el-input 
                            show-password 
                            v-model="userInfo.old_pwd" 
                            type="password"
                            placeholder="请输入旧密码"
                            class="custom-input"
                        />
                    </el-form-item>
                    <el-form-item label="新密码" prop="new_pwd">
                        <el-input 
                            show-password 
                            v-model="userInfo.new_pwd" 
                            type="password"
                            placeholder="请输入新密码"
                            class="custom-input"
                        />
                    </el-form-item>
                    <el-form-item label="确认密码" prop="re_pwd">
                        <el-input 
                            show-password 
                            v-model="userInfo.re_pwd" 
                            type="password"
                            placeholder="请确认新密码"
                            class="custom-input"
                        />
                    </el-form-item>
                    <el-form-item class="form-footer">
                        <el-button type="primary" @click="updatePwd(formRef)" class="submit-button">
                            <el-icon><Check /></el-icon>提交修改
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<style lang="scss" scoped>
.page-container {
    padding: 20px;
    
    .box-card {
        margin-bottom: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        transition: all 0.3s;

        &:hover {
            box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
        }
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;

        .title {
            font-size: 16px;
            font-weight: bold;
            color: #303133;
        }
    }

    .form-content {
        padding: 20px;
        display: flex;
        justify-content: center;
    }

    .password-form {
        width: 500px;
        padding: 20px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

        .el-form-item {
            margin-bottom: 25px;
        }

        .form-footer {
            margin-top: 40px;
            text-align: center;
        }
    }
}

.custom-input {
    width: 100%;
}

.submit-button {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    background-color: var(--el-color-primary) !important;
    border-color: var(--el-color-primary) !important;
    color: white !important;
    cursor: pointer;
    
    &:hover {
        background-color: var(--el-color-primary-light-3) !important;
        border-color: var(--el-color-primary-light-3) !important;
    }
    
    .el-icon {
        margin-right: 4px;
        font-size: 16px;
    }
}

.el-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
</style>

